<template>
  <div class="accumulation">
    <nav-bar></nav-bar>
    <div class="page-main clearfix">
      <div class="page-left">
        <div class="xyd-container">
          <div class="xyd-c-title">最近成功定制</div>
          <div class="xyd-c-content">
            <ul>
              <li v-for="i in 4">
								<div class="ttop">//小学语文二年级课件</div>
								<div class="tbottom">//发布人：伍二娃      接单人：陈立</div>
							</li>
            </ul>
          </div>
        </div>
        <small-carousel :data="ads"></small-carousel>
      </div>
      <div class="page-right">
        <div class="xyd-container">
          <div class="xyd-c-title clearfix">
            <span class="title">定制筛选</span>
						<a href="javascript:;" @click="clear"><i class="xyd-clear"></i>清空条件</a>
          </div>
          <div class="xyd-c-content">
						<div class="radio-container">
							<el-radio-group v-model="radio1" @change="handleChange1">
								<el-radio-button :label="item.name" v-for="item,i in category" :key="i"></el-radio-button>
							</el-radio-group>
						</div>
						<div class="btn-group">
							<span>共找到{{total}}个定制资源</span>
							<span class="right">
								<button class="yellow-btn" @click="handleShowIWant">我要定制</button>
								<button class="orange-btn" @click="$router.push('/my-customized')">查看我的订单</button>
							</span>
						</div>
            <table class="xyd-list accumulation-list" v-loading.body="loading">
              <thead class="xyd-list-head">
                <tr>
                  <th class="h-item">定制</th>
                  <th class="h-item">悬赏金</th>
                  <th class="h-item"></th>
                </tr>
              </thead>
              <tbody class="xyd-list-body">
                <customized-item :value="item" v-for="item,i in task" :key="i"></customized-item>
              </tbody>
            </table>
            <div class="pagination-container">
              <el-pagination
                :page-size="offset"
                layout="total, prev, pager, next"
                :total="total"
                @current-change="handlePageChange"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="填写定制信息" top="20px" :visible.sync="dialogFormVisible" :before-close="reset">
      <el-form :model="form" style="padding: 37px 80px 0" v-if="progress === 0">
        <el-form-item label="标题：" :label-width="formLabelWidth">
          <el-input v-model="form.title" auto-complete="off" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="资源类型：" :label-width="formLabelWidth">
          <el-select
            v-model="typeValue"
            placeholder="请选择资源类型"
            @change="handleTypeChange"
            style="width:360px;"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资源版本：" :label-width="formLabelWidth">
          <div class="xyd-container">
            <div class="xyd-c-title" style="line-height:40px;">资源分类</div>
            <div class="xyd-c-content">
              <div v-if="sideCategory && sideCategory.length === 0" style="padding-left:10px;">暂无数据</div>
              <div style="height:300px;overflow:scroll">
                <el-tree
                  v-if="sideCategory && sideCategory.length !== 0"
                  :data="sideCategory"
                  :highlight-current="true"
                  :load="loadNode"
                  :props="props"
                  lazy>
                </el-tree>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="悬赏金额：" :label-width="formLabelWidth">
          <el-input v-model="form.price" auto-complete="off" placeholder="请选择悬赏金额"></el-input>
        </el-form-item>
        <el-form-item label="需求描述：" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.intro" placeholder="请输入你的描述"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="form" style="padding: 37px 80px 0" v-if="progress === 1">
        <el-form-item label="征集模式：" :label-width="formLabelWidth">
          <el-radio class="radio" v-model="form.sell_type" :label="0">购买使用权</el-radio>
          <el-radio class="radio" v-model="form.sell_type" :label="1">购买版权</el-radio>
        </el-form-item>
        <el-form-item label="赏金设置：" :label-width="formLabelWidth">
          <el-input v-model="form.per_price" auto-complete="off" placeholder="请输入金额">
            <template slot="append">钻石语点／件</template>
          </el-input>
        </el-form-item>
        <el-form-item label="可选稿件：" :label-width="formLabelWidth">
          <el-input v-model="form.choose_amount" auto-complete="off" placeholder="请输入数量">
            <template slot="append">件</template>
          </el-input>
        </el-form-item>
        <el-form-item label="征稿时间：" :label-width="formLabelWidth">
          <el-input v-model="form.days" auto-complete="off" placeholder="请输入时间">
            <template slot="append">天</template>
          </el-input>
        </el-form-item>
        <el-form-item label="联系QQ：" :label-width="formLabelWidth">
          <el-input v-model="form.qq_no" auto-complete="off" placeholder="请输入您的QQ"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" :label-width="formLabelWidth">
          <el-input v-model="form.phone" auto-complete="off" placeholder="请输入您的联系电话"></el-input>
        </el-form-item>
        <el-form-item label="版权协议：" :label-width="formLabelWidth">
          <div>
            <a href="">点击此处下载协议模版</a>
            <div>
              <el-button  size="small" @click="handleUpload">选择文件</el-button>
              <span>{{filename}}</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="" :label-width="formLabelWidth">
          <div><el-checkbox v-model="form.must_choose">承诺选稿</el-checkbox></div>
          <div><el-checkbox v-model="checked2">阅读并同意</el-checkbox><a href="">《晓语典网站发布私人定制协议》</a></div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-bottom: 20px;">
        <div v-if="progress === 0">
          <button class="common-btn" style="width:360px;" @click="goNext">
            下一步
          </button>
        </div>
        <div v-if="progress === 1">
          <button class="common-btn" style="width:360px;" @click="handlePublish">
            发布
          </button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { NavBar } from 'views/layout'
  import { getTasks, publishTask } from 'api/task'
  import { getChild } from 'api/resource'
  import Adv from 'views/components/adv'
  import SmallCarousel from 'views/components/smallCarousel'
  import ResourceItem from 'views/components/resourceItem'
  import CustomizedItem from './customizedItem'
  import pick from 'utils/file/picker'

  export default {
    name: 'Listen',
    components: {
      NavBar,
      Adv,
      ResourceItem,
      CustomizedItem,
      SmallCarousel
    },
    data() {
      return {
        radio1: '',
        radio2: '',
        dialogFormVisible: false,
        progress: 0,
        formLabelWidth: '120px',
        form: {
          title: '',
          task_type_id: '',
          price: '',
          intro: '',
          sell_type: 0,
          days: '',
          qq_no: '',
          must_choose: false,
          choose_amount: '',
          per_price: ''
        },
        loading: false,
        filename: '文件名',
        typeOptions: [],
        typeValue: '',
        sideCategory: [],
        category: [],
        ads: [],
        checked1: true,
        checked2: true,
        total: 0,
        page: 1,
        offset: 10,
        task: [],
        props: {
          label: 'name',
          children: 'child'
        }
      }
    },
    created() {
      this.$store.dispatch('GetTops')
      .then(res => {
        this.category = res
      })
      .catch(err => console.log(err))
      this.loading = true
      getTasks({
        page: 1,
        offset: 10
      })
      .then(res => {
        console.log(res)
        this.loading = false
        this.total = res.data.count
        this.task = res.data.task
        this.ads = res.data.ads
      })
      .catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    methods: {
      // 获取数据
      fetchData(params = {}) {
        this.loading = true
        getTasks({
          catid: this.catid,
          page: this.page,
          offset: this.offset,
          ...params
        })
        .then(res => {
          this.loading = false
          this.task = res.data.task
        })
        .catch(() => {
          this.loading = false
        })
      },
      // 清除条件搜索
      clear() {
        this.radio1 = '' // 双向绑定会自动触发请求
      },
      // 一级分类筛选
      handleChange1(a) {
        const ids = this.category.filter(v => v.name === a)
        let catid
        if (ids && ids.length !== 0) {
          catid = ids[0].id
        }
        this.catid = catid
        this.page = 1
        this.fetchData()
      },
      // 分页
      handlePageChange(page) {
        this.page = page
        this.fetchData()
      },
      // 定制弹框显示，并获取分类数据
      handleShowIWant() {
        this.dialogFormVisible = true
        this.$store.dispatch('GetTops')
        .then(res => {
          this.typeOptions = res
        })
        .catch(err => console.log(err))
      },
      // 关闭弹框前回调
      reset() {
        this.progress = 0
        this.dialogFormVisible = false
      },
      // 私人定制弹框，类型选择
      handleTypeChange(id) {
        this.task_type_id = id
        getChild({
          catid: id
        })
        .then(res => {
          this.sideCategory = res.data
        })
        .catch(err => console.log(err))
      },
      // 子级筛选获取下一级
      loadNode(node, resolve) {
        // node.level === 0时，下面的语句将为undefind
        // this.task_type_id = node.data.id
        if (node.level === 0) {
          return resolve(this.sideCategory)
        } else {
          this.task_type_id = node.data.id
          getChild({
            catid: node.data.id
          })
          .then(res => {
            resolve(res.data)
          })
          .catch(err => console.log(err))
        }
      },
      // 下一步
      goNext() {
        if (!this.form.title) {
          this.$message({
            message: '请填写标题',
            type: 'warning'
          })
          return false
        } else if (!this.task_type_id) {
          this.$message({
            message: '请选择资源分类',
            type: 'warning'
          })
          return false
        } else if (!this.form.price) {
          this.$message({
            message: '请填写悬赏金额',
            type: 'warning'
          })
          return false
        } else {
          this.progress = 1
        }
      },
      // 发布
      handlePublish() {
        publishTask({
          ...this.form,
          agreement: this.file,
          task_type_id: this.task_type_id
        })
        .then(res => {
          console.log(res)
          this.progress = 0
          this.dialogFormVisible = false
        })
        .catch(err => {
          this.$message({
            message: err.msg,
            type: 'warning'
          })
        })
      },
      // 上传
      handleUpload() {
        pick()
        .then(file => {
          this.file = file
          this.filename = file.name
        })
        .catch(err => console.log(err))
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.accumulation{
  .page-main{
    .page-left{
			.xyd-container{
				.xyd-c-content{
					>ul{
						padding: 12px;
						>li{
							&:last-child{
								border-bottom: 0;
							}
							height: 70px;
							padding: 15px 0;
							border-bottom: 1px solid #e5e6e7;
							.ttop{
								line-height: 20px;
							}
							.tbottom{
								color: #999;
								font-size: 12px;
								line-height: 20px;
							}
						}
					}
				}
			}
    }
    .page-right{
			.xyd-container{
				.xyd-c-title{
					padding: 0 20px;
					>span.title{
						float: left;
					}
					>a{
						float: right;
						font-size: 14px;
					}
				}
				.xyd-c-content{
					padding: 0 40px;
					.radio-container{
						padding: 20px 0;
						border-bottom: 1px solid #e5e6e7;
					}
					.btn-group{
						padding: 20px 0;
						.right{
							float: right;
						}
						.yellow-btn{
							width: 100px;
							height: 30px;
							font-size: 14px;
						}
						.orange-btn{
							width: 100px;
							height: 30px;
							font-size: 14px;
						}
					}
				}
			}
    }
  }
}
</style>